import { Form, Input, Button, Select,InputNumber,DatePicker  } from 'antd';
import React from 'react';
import UploadImg from './Upload'
import UploadOne from './UploadOne'
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import axios from 'axios'
import {ADD_GOODS} from '../utils/api'

const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span:16,
    },
};

class Demo extends React.Component {
    constructor() {
        super();
        this.state={
            xiangqingurl:[],
            datuurl:'',
            form:''
        }
    }
    formRef = React.createRef();
    onGenderChange = (value) => {
        console.log(value)
    };
    // 提交
    onFinish = values => {
        this.ChangeTime(values.shopCreateTime._d);
        console.log(this.ChangeTime(values.shopCreateTime._d));
        console.log(values);
        axios({
            url:ADD_GOODS,
            method:'post',
            data:{
                goodsDetaillmgList:this.state.xiangqingurl,
                goods_buy_restrictions:values.shopPromotion,// 商品促销价
                goods_cost_price:values.shopCostPrice,
                goods_courier_price:values.shopCourier,// 商品快递价
                goods_describe:values.shopDescribe,
                goods_home_img_url:this.state.datuurl,
                goods_inventory:values.shopInventory,
                goods_name:values.shopName,
                goods_original_price:values.shopOriginalPrice,
                goods_promotion:values.shopPromotion,
                goods_shelves_id:values.shopState,
                merchant_id:1
            }
        }).then(data=>{
            console.log(data);
            this.onReset()
        })
    };
    // 清空
    onReset = () => {
        this.formRef.current.resetFields();
    };
    // 时间转换
    ChangeTime(d) {
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    }
    // 传递图片地址
    xiangqingimg(e){
        this.setState({
            xiangqingurl:e.state.xiangqingimgSrc
        });
        console.log(this.state.xiangqingurl);
    }
    datuimg(e){
        this.setState({
            datuurl:e.state.datuImgUrl[0]
        });
        console.log(this.state.datuurl);
    }
    render() {
        return (
            <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
                <Form.Item name="shopName" label="商品名称"
                    rules={[{required: true, message: '此处不可以为空!'}]}>
                    <Input />
                </Form.Item>
                <Form.Item name="shopCreateTime" label="创建时间"
                           rules={[
                               {required: true,
                                   message: '此处不可以为空!'
                               },
                           ]}>
                    <DatePicker locale={locale} showTime />
                </Form.Item>
                <Form.Item name="shopState" label="商品状态"
                    rules={[
                        {required: true,
                         message: '此处不可以为空!'
                        },
                    ]}>
                    <Select
                        placeholder="请选择商品状态"
                        onChange={this.onGenderChange}
                        allowClear>
                        <Option value="1">出售中</Option>
                        <Option value="2">促销中</Option>
                        <Option value="3">已售空</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="shopInventory" label="商品库存"
                           rules={[
                               {required: true,
                                message: '此处不可以为空!'
                               },
                           ]}>
                    <Input />
                </Form.Item>
                <Form.Item name="shopCostPrice" label="商品成本价"
                           rules={[
                               {required: true,
                                message: '此处不可以为空!'
                               },
                           ]}>
                    <Input />
                </Form.Item>
                <Form.Item name="shopPromotion" label="商品促销价">
                    <Input />
                </Form.Item>
                <Form.Item name="shopNumber" label="商品购买数量限制">
                    <InputNumber />
                </Form.Item>
                <Form.Item name="shopCourier" label="商品快递价">
                    <Input />
                </Form.Item>
                <Form.Item name="shopDescribe" label="商品描述"
                           rules={[
                               {required: true,
                                message: '此处不可以为空!'
                               },
                           ]}>
                    <Input.TextArea />
                </Form.Item>
                <Form.Item name="shopOriginalPrice" label="商品原价"
                           rules={[
                               {required: true,
                                   message: '此处不可以为空!'
                               },
                           ]}>
                    <Input />
                </Form.Item>
                <Form.Item name="shopImgUrl" label="商品详情图片">
                    <UploadImg onUrl={this.xiangqingimg.bind(this)}/>
                </Form.Item>
                <Form.Item name="shopImgUrl" label="商品首页大图">
                    <UploadOne onUrl={this.datuimg.bind(this)}/>
                </Form.Item>
                    <Button type="primary" htmlType="submit" >
                        提交
                    </Button>
                    <Button htmlType="button" onClick={this.onReset}>
                        清空
                    </Button>
            </Form>
        );
    }
}

export default Demo